import PropTypes from 'prop-types'
import React, { memo, useCallback } from 'react'
import { SectionV2Wrapper } from './style'
import SectionHeader from '@/components/section-header'
import SectionRooms from '@/components/section-rooms'
import SectionTabs from '@/components/section-tabs'
import { useState } from 'react'
import SectionFooter from '@/components/section-footer'
const HomeSectionV2 = memo((props) => {
    const {infoData}=props
  
  // 获取初识name
  const initName=infoData?.dest_address?.[0]?.name
  // 数据转换,将数据的name提取出来做展示tab
  const tabNames= infoData?.dest_address?.map(item=>item.name)
  
  // 当前所处的tab名字
  const [currentTabName,setCurrentTabName]=useState(initName)
  // 点击tab
  const handleTabClick=useCallback((index,name)=>{
    setCurrentTabName(name)
  },[])
  return (
    <SectionV2Wrapper>
          <div className="discount">
               <SectionHeader title={infoData.title} subtitle={infoData.subtitle} />
               <SectionTabs tabNames={tabNames} tabClick={handleTabClick}/>
               <SectionRooms roomList={infoData?.dest_list?.[currentTabName] } itemwidth="33.33%" />
               <SectionFooter name={currentTabName}/>
          </div>
    </SectionV2Wrapper>
  )
})

HomeSectionV2.propTypes = {
    infoData:PropTypes.object
}

export default HomeSectionV2